<template>
  <!-- 大图 B -->
  <div class="bgimg">
    <img
      src="https://cdn.pohome.cn/asset/carousel/pet.jpg"
      alt=""
    >
  </div>
  <!-- 大图 E -->
  <!-- 筛选 B -->
  <div class="screen">
    <div class="screen-box">
      <div class="s-label">
        <label>物种</label>
        <el-radio-group v-model="radio">
          <el-radio :value="3">全部</el-radio>
          <el-radio :value="6">汪星人</el-radio>
          <el-radio :value="9">喵星人</el-radio>
        </el-radio-group>
      </div>
      <div class="s-label">
        <label>性别</label>
        <el-radio-group v-model="radio2">
          <el-radio :value="3">全部</el-radio>
          <el-radio :value="6">男孩</el-radio>
          <el-radio :value="9">女孩</el-radio>
        </el-radio-group>
      </div>
      <div class="s-label">
        <label>体型</label>
        <el-radio-group v-model="radio3">
          <el-radio :value="3">全部</el-radio>
          <el-radio :value="6">小型</el-radio>
          <el-radio :value="9">中型</el-radio>
          <el-radio :value="12">大型</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="s-btn">
      <img
        src="https://www.pohome.cn/image/pet-filter-cartoon.png"
        alt=""
      >
    </div>
  </div>
  <!-- 筛选 E -->
  <!-- 领养推荐 B -->
  <div class="adoption">
    <div class="adoptionb-body">
      <div class="adoption-card">
        <div
          class="card"
          v-for="item in adoptionData"
          :key="item.id"
        >
          <div class="img">
            <img
              :src="item.img"
              @click="toDetail(item.id)"
              alt=""
            >
          </div>
          <div class="name">{{item.name}}</div>
          <div class="p"><span>{{item.age}}</span><span>{{item.gender}}</span><span>{{item.variety}}</span></div>
        </div>
      </div>
      <!-- 分页 B -->
      <ul class="page">
        <li class="btn"><el-icon>
            <ArrowLeft />
          </el-icon></li>
        <li class="btn">1</li>
        <li class="btn">2</li>
        <li class="btn">3</li>
        <li class="btn">4</li>
        <li class="btn">5</li>
        <li class="btn"><el-icon>
            <ArrowRight />
          </el-icon></li>
      </ul>
      <!-- 分页 e -->
    </div>

  </div>
  <!-- 领养推荐 E -->

</template>

<script setup>
import '../assets/adopt.css'
import { ref, onMounted, watch } from 'vue'
import router from '@/router'
import axios from 'axios'
const adoptionData = ref([])
const data = ref([])
const radio = ref(3)
const radio2 = ref(3)
const radio3 = ref(3)
onMounted(() => {
  let api = 'https://apifoxmock.com/m2/4457699-4103776-default/183178684'
  axios.get(api).then((res) => {
    data.value = res.data
    adoptionData.value = data.value
  })
})
watch(
  () => radio.value,
  () => {
    if (radio.value == 6) {
      adoptionData.value = []
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].species == '狗') {
          adoptionData.value.push(data.value[i])
        }
      }
    } else if (radio.value == 9) {
      adoptionData.value = []
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].species == '猫') {
          adoptionData.value.push(data.value[i])
        }
      }
    } else {
      adoptionData.value = data.value
    }
  }
)
watch(
  () => radio2.value,
  () => {
    if (radio2.value == 6) {
      adoptionData.value = []
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].gender == '男孩') {
          adoptionData.value.push(data.value[i])
        }
      }
    } else if (radio2.value == 9) {
      adoptionData.value = []
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].gender == '女孩') {
          adoptionData.value.push(data.value[i])
        }
      }
    } else {
      adoptionData.value = data.value
    }
  }
)
watch(
  () => radio3.value,
  () => {
    if (radio3.value == 6) {
      adoptionData.value = []
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].shape == '小型') {
          adoptionData.value.push(data.value[i])
        }
      }
    } else if (radio3.value == 9) {
      adoptionData.value = []
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].shape == '中型') {
          adoptionData.value.push(data.value[i])
        }
      }
    } else if (radio3.value == 12) {
      adoptionData.value = []
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].shape == '大型') {
          adoptionData.value.push(data.value[i])
        }
      }
    } else {
      adoptionData.value = data.value
    }
  }
)
function toDetail(i) {
  sessionStorage.setItem('id', i)
  router.push({ path: '/details' })
}
function a() {
  console.log('筛选')
}
</script>